<template>
  <el-dialog
    title="标签管理"
    :visible.sync="isTag"
    width="50%"
    top="5vh"
    :before-close="handleClose">
    <div class="tag-box">
      <span>标签名称：</span>
      <el-input v-model="tagName" size="mini" :rules="rules" class="addInput" placeholder="请输入添加的标签名称"></el-input>
      <el-button type="primary" size="mini" @click="addTag"  icon="el-icon-plus">添加</el-button>
      <el-button type="success" size="mini" @click="useTag" icon="el-icon-sold-out">引用</el-button>
      <el-button type="danger" size="mini" @click="deleteTag" icon="el-icon-delete">批量删除</el-button>
    </div>
    <div class="tagTabel">
      <el-table
        ref="multipleTable"
        :data="tagData"
        height="400"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="标签名称">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.updateName" :placeholder="scope.row.tag"
            style="width:180px;">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="操作" width="180">
          <template slot-scope="scope">
            <i class="el-icon-edit update-icon" @click="onclickUpdate(scope.row)"></i>
            <i class="el-icon-delete delete-icon"   @click="onclickDeleteItem(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tagPage.pageNum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="tagPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tagPage.total">
      </el-pagination>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    name:'tagManage',
    props:{
      isTag:{
        type:Boolean,
        default:()=>false,
        required:true
      },
      utags:{
        type:Array,
        default:()=>[],
        required:false
      }
    },
    data(){
      return {
        tagName:'',
        tagPage:{
          pageSize:10,
          pageNum:1,
          total:0,
        },
        tagData:[
          {tagName:'aaaa'}
        ],
        multipleSelection:[],
        rules:[
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ]
      }
    },
    created(){
      this.onloadList()
      if(this.utags.length>0){
        this.utags.forEach((item)=>{
          this.$refs.multipleTable.toggleRowSelection(item);
        })
      }
    },
    methods:{
      //关闭
      handleClose(){
        this.$emit('closeCall')
      },
      //查询当前标签
      onloadList(){
        this.$http.get('/tags/page',{
          params:{
            pageSize:this.tagPage.pageSize,
            pageNum:this.tagPage.pageNum
          }
        }).then((res)=>{
            this.tagData = res.list
            this.tagPage.total = res.total
          }).catch((err)=>{

        })
      },
      //新增标签
      addTag(){
        if(this.tagName!=''){
          this.$http.post('/tags/add',{tag:this.tagName})
            .then((res)=>{
              this.onloadList()
            })
        }else{
          this.$message({message: '请填写标签名称',type: 'warning'});
        }
      },
      //使用标签
      useTag(){
       if(this.multipleSelection.length > 0){
         if(this.multipleSelection.length<6) {
           this.$emit('useTags', this.multipleSelection);
         }else{
           this.$message({message: '最多引用5个标签',type: 'warning'});
         }
       }else{
         this.$message({message: '请选择要引用的标签',type: 'warning'});
       }
      },
      //批量删除标签
      deleteTag(){
        if(this.multipleSelection.length > 0){
          let id=[]
          this.multipleSelection.forEach((item)=>{
            id.push(item.id)
          })
          this.$http.delete('/tags/delete',{data:id})
            .then((res)=>{
              this.$message({message: '删除成功',type: 'success'})
              this.onloadList()
            })
        }else{
          this.$message({message: '请选择要删除的标签',type: 'warning'});
        }
      },
      //修改单条数据
      onclickUpdate(data){
        let updateData = {}
        updateData.id=data.id
        if(data.updateName){
          updateData.tag = data.updateName
          this.$http.put('/tags/modify',updateData)
            .then((res)=>{
              this.$message({message: '修改成功',type: 'success'})
              this.onloadList()
            })
        }else{
          this.$message({message: '标签名称未改变',type: 'warning'});
        }

      },
      //删除单条数据
      onclickDeleteItem(data){
        this.$http.delete('/tags/delete/'+data.id)
          .then((res)=>{
            this.$message({message: '删除成功',type: 'success'})
            this.onloadList()
          })
      },
      //改变每页显示条数
      handleSizeChange(val){
        this.tagPage.pageSize=val
        this.onloadList()
      },
      //页码切换
      handleCurrentChange(val){
        this.tagPage.pageNum=val
        this.onloadList()
      },
      //选中的表格
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>
<style lang="less" scoped>
.tag-box{padding:20px;}
.addInput{width:280px;}
.tagTabel{padding:0 20px 10px 20px;}
  .page{margin-top:10px;}
.update-icon{cursor: pointer;}
.delete-icon{margin:0 20px;cursor: pointer;}
</style>
